---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

export function getStaticPaths() {
  return [
    { params: { slug: 'new-dashboard-features' } },
    { params: { slug: 'mobile-app-launch' } },
    { params: { slug: 'api-improvements' } },
    { params: { slug: 'team-collaboration-tools' } },
    { params: { slug: 'security-enhancements' } },
    { params: { slug: 'integration-marketplace' } },
  ];
}

const { slug } = Astro.params;

// This would normally come from a CMS or database
const posts = {
  'new-dashboard-features': {
    title: 'New Dashboard Features Released',
    date: 'May 15, 2025',
    author: 'Sarah Johnson',
    authorRole: 'Product Manager',
    authorAvatar: 'https://randomuser.me/api/portraits/women/32.jpg',
    category: 'Product Updates',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">We're excited to announce the release of our new dashboard features designed to help you gain deeper insights into your business performance. These updates are based on feedback from our users and are aimed at making data analysis more intuitive and actionable.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Key Improvements</h2>
      
      <p class="mb-4">Our new dashboard includes several key improvements:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Customizable widgets that allow you to focus on the metrics that matter most to your business</li>
        <li>Advanced filtering options to segment your data by date, user type, location, and more</li>
        <li>Improved visualization tools including new chart types and color customization</li>
        <li>Real-time data updates that refresh automatically without requiring a page reload</li>
        <li>Export capabilities for sharing insights with your team or stakeholders</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Performance Metrics</h2>
      
      <p class="mb-4">The new performance metrics section provides a comprehensive overview of your business health with metrics such as:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>User engagement rates across different features</li>
        <li>Conversion metrics at each stage of your funnel</li>
        <li>Revenue tracking with growth comparisons</li>
        <li>Customer retention analysis</li>
        <li>Team productivity measurements</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Pro Tip</h3>
        <p>Use the new dashboard's comparison feature to benchmark your current performance against previous periods. This can help you identify trends and make data-driven decisions for your business strategy.</p>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">What's Next</h2>
      
      <p class="mb-4">We're already working on the next set of improvements for our analytics tools. In the coming months, you can expect:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>AI-powered insights that automatically highlight anomalies and opportunities</li>
        <li>Advanced forecasting tools to help with planning and goal-setting</li>
        <li>More integration options with popular business intelligence tools</li>
        <li>Custom report builders for more flexible data analysis</li>
      </ul>
      
      <p class="mb-4">We value your feedback and many of these features were developed based on suggestions from our user community. If you have ideas for how we can make our platform even better, please don't hesitate to reach out to our product team.</p>
      
      <p>Thank you for being a valued customer. We're committed to continually improving our platform to help your business succeed.</p>
    `
  },
  'mobile-app-launch': {
    title: 'Introducing Our Mobile App',
    date: 'April 28, 2025',
    author: 'Michael Chen',
    authorRole: 'CTO',
    authorAvatar: 'https://randomuser.me/api/portraits/men/46.jpg',
    category: 'New Features',
    image: 'https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">Today marks an exciting milestone for our platform as we launch our mobile app for iOS and Android devices. Now you can access your workspace from anywhere, ensuring you never miss an important update or opportunity.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Key Features</h2>
      
      <p class="mb-4">Our mobile app includes all the essential features you need on the go:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Real-time dashboard with key metrics and alerts</li>
        <li>Task management with push notifications for deadlines</li>
        <li>Team messaging and collaboration tools</li>
        <li>Document viewing and basic editing capabilities</li>
        <li>Customer information access with quick action options</li>
        <li>Offline mode for working without an internet connection</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Designed for Mobile</h2>
      
      <p class="mb-4">Rather than simply shrinking our web interface, we've completely reimagined the experience for mobile devices. The app features:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Touch-optimized controls and gestures</li>
        <li>Streamlined workflows designed for on-the-go productivity</li>
        <li>Dark mode support to reduce eye strain and save battery</li>
        <li>Biometric authentication for secure and quick access</li>
        <li>Widget support for iOS and Android home screens</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Download Now</h3>
        <p class="mb-4">Our mobile app is available for download on both major platforms:</p>
        <div class="flex flex-wrap gap-4">
          <a href="#" class="inline-flex items-center px-4 py-2 bg-black text-white rounded-lg">
            <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.5575 12.0637C17.5883 14.2453 19.3131 15.6164 19.3439 15.6369C19.3234 15.6882 19.0292 16.6164 18.3687 17.5753C17.8029 18.3897 17.2166 19.1939 16.2883 19.2144C15.3805 19.2349 15.0658 18.6882 14.0146 18.6882C12.9634 18.6882 12.6078 19.1939 11.7614 19.2349C10.8536 19.2759 10.1726 18.3897 9.5966 17.5753C8.4224 15.9062 7.5146 12.8371 8.7097 10.7594C9.2961 9.7287 10.3678 9.0574 11.5419 9.0369C12.4087 9.0164 13.2346 9.6246 13.7595 9.6246C14.2844 9.6246 15.2946 8.8925 16.3458 9.0164C16.8502 9.0369 17.9829 9.2452 18.6844 10.1426C18.6229 10.1836 17.5371 10.7799 17.5575 12.0637M15.4419 7.3692C15.9053 6.8021 16.2097 6.0184 16.1175 5.2143C15.4214 5.2451 14.5546 5.6697 14.0707 6.2164C13.6429 6.6923 13.2761 7.5077 13.3888 8.2913C14.1624 8.3528 14.9785 7.9364 15.4419 7.3692"></path>
            </svg>
            App Store
          </a>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg">
            <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3.609 12C3.609 10.5681 4.04495 9.17132 4.86091 8H4.5C3.67157 8 3 7.32843 3 6.5C3 5.67157 3.67157 5 4.5 5H19.5C20.3284 5 21 5.67157 21 6.5C21 7.32843 20.3284 8 19.5 8H19.1391C19.9551 9.17132 20.391 10.5681 20.391 12C20.391 13.4319 19.9551 14.8287 19.1391 16H19.5C20.3284 16 21 16.6716 21 17.5C21 18.3284 20.3284 19 19.5 19H4.5C3.67157 19 3 18.3284 3 17.5C3 16.6716 3.67157 16 4.5 16H4.86091C4.04495 14.8287 3.609 13.4319 3.609 12ZM5.39052 16H18.6095C19.8573 14.8258 20.391 13.4435 20.391 12C20.391 10.5565 19.8573 9.17419 18.6095 8H5.39052C4.14273 9.17419 3.609 10.5565 3.609 12C3.609 13.4435 4.14273 14.8258 5.39052 16Z"></path>
            </svg>
            Google Play
          </a>
        </div>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Future Updates</h2>
      
      <p class="mb-4">This is just the beginning for our mobile experience. Our roadmap includes:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Advanced reporting features with interactive charts</li>
        <li>Camera integration for document scanning and image uploads</li>
        <li>Voice commands for hands-free operation</li>
        <li>Augmented reality features for specific use cases</li>
        <li>Enhanced offline capabilities</li>
      </ul>
      
      <p class="mb-4">We're committed to making our mobile app as powerful as our web platform while maintaining the simplicity and ease of use that our customers love.</p>
      
      <p>We'd love to hear your feedback as you use the app. Please share your thoughts and suggestions through the feedback form in the app settings or contact our support team.</p>
    `
  },
  'api-improvements': {
    title: 'API Improvements and New Endpoints',
    date: 'April 10, 2025',
    author: 'Emily Rodriguez',
    authorRole: 'Lead Developer',
    authorAvatar: 'https://randomuser.me/api/portraits/women/65.jpg',
    category: 'Developer Updates',
    image: 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">We're excited to announce significant improvements to our API along with new endpoints to help developers build more powerful integrations with our platform.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">API Version 2.0</h2>
      
      <p class="mb-4">Our new API version 2.0 includes several major improvements:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>RESTful design principles for more intuitive resource access</li>
        <li>Improved rate limits with better handling for high-volume requests</li>
        <li>Comprehensive error messages with actionable suggestions</li>
        <li>OAuth 2.0 implementation for more secure authentication</li>
        <li>Pagination for all list endpoints to improve performance</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8 overflow-x-auto">
        <h3 class="text-xl font-semibold mb-3">Example Request</h3>
        <pre class="text-sm bg-gray-900 text-green-400 p-4 rounded"><code>curl -X GET "https://api.OpenAuth.Net.com/v2/users" \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json"</code></pre>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">New Endpoints</h2>
      
      <p class="mb-4">We've added several new endpoints to enable more advanced integrations:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li><strong>/analytics</strong> - Access detailed analytics data for your account</li>
        <li><strong>/webhooks</strong> - Configure and manage webhook notifications</li>
        <li><strong>/automations</strong> - Create and manage automated workflows</li>
        <li><strong>/teams</strong> - Manage team members and permissions</li>
        <li><strong>/files</strong> - Upload, download, and manage files</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Improved Documentation</h2>
      
      <p class="mb-4">Along with these API improvements, we've completely revamped our developer documentation:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Interactive API explorer for testing endpoints directly in the browser</li>
        <li>Code examples in multiple languages (JavaScript, Python, Ruby, PHP, Go)</li>
        <li>Step-by-step integration guides for common use cases</li>
        <li>Comprehensive reference documentation for all endpoints</li>
        <li>Changelog to track API updates and changes</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Migration Guide</h3>
        <p>We've prepared a comprehensive migration guide to help you transition from API v1 to v2. The guide includes detailed information on breaking changes, new features, and best practices for updating your integrations.</p>
        <a href="#" class="inline-flex items-center mt-3 text-primary-600 dark:text-primary-400 font-medium hover:underline">
          View Migration Guide
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Deprecation Schedule</h2>
      
      <p class="mb-4">To ensure a smooth transition, we'll be supporting API v1 alongside v2 according to this schedule:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li><strong>Now - October 2025:</strong> Both API v1 and v2 available</li>
        <li><strong>October 2025:</strong> API v1 enters maintenance mode (no new features)</li>
        <li><strong>April 2026:</strong> API v1 deprecated (still functional but with warnings)</li>
        <li><strong>October 2026:</strong> API v1 sunset (no longer available)</li>
      </ul>
      
      <p class="mb-4">We recommend migrating to API v2 as soon as possible to take advantage of the new features and improvements.</p>
      
      <p>If you have any questions or need assistance with the migration, please don't hesitate to reach out to our developer support team.</p>
    `
  },
  'team-collaboration-tools': {
    title: 'Enhanced Team Collaboration Tools',
    date: 'March 22, 2025',
    author: 'David Wilson',
    authorRole: 'Product Designer',
    authorAvatar: 'https://randomuser.me/api/portraits/men/22.jpg',
    category: 'Product Updates',
    image: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">We're thrilled to announce a major update to our collaboration features, designed to help teams work together more effectively and efficiently.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Real-time Collaboration</h2>
      
      <p class="mb-4">Our enhanced collaboration tools now include:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Real-time document editing with multiple users</li>
        <li>Presence indicators showing who's currently viewing or editing</li>
        <li>Inline commenting and @mentions for targeted feedback</li>
        <li>Version history with the ability to restore previous versions</li>
        <li>Change tracking to see who made specific edits</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Pro Tip</h3>
        <p>Use the new "Focus Mode" when you need uninterrupted work time. This will temporarily pause notifications while still recording all comments and changes for you to review later.</p>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Team Spaces</h2>
      
      <p class="mb-4">We've introduced Team Spaces to help organize your collaborative work:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Dedicated workspaces for different teams or projects</li>
        <li>Customizable permissions and access controls</li>
        <li>Team-specific dashboards showing relevant metrics and tasks</li>
        <li>Shared calendars for coordinating schedules and deadlines</li>
        <li>Team announcement boards for important updates</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Enhanced Communication Tools</h2>
      
      <p class="mb-4">Communication is at the heart of collaboration, so we've significantly improved our messaging capabilities:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Threaded conversations for organized discussions</li>
        <li>Rich text formatting with support for code snippets</li>
        <li>Integrated video conferencing for quick meetings</li>
        <li>Screen sharing capabilities for demonstrations</li>
        <li>Message scheduling for non-disruptive communication</li>
        <li>Improved search functionality to find past conversations</li>
      </ul>
      
      <div class="bg-primary-50 dark:bg-primary-900/30 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3 text-primary-700 dark:text-primary-300">Webinar: Mastering Team Collaboration</h3>
        <p class="mb-4">Join us for a live webinar where we'll demonstrate these new features and share best practices for effective team collaboration.</p>
        <p class="font-medium">Date: June 5, 2025 at 11:00 AM PT</p>
        <a href="#" class="inline-flex items-center mt-3 text-primary-600 dark:text-primary-400 font-medium hover:underline">
          Register Now
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Task Management Improvements</h2>
      
      <p class="mb-4">We've also enhanced our task management capabilities to better support collaborative work:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Team task boards with customizable workflows</li>
        <li>Dependency tracking between related tasks</li>
        <li>Workload balancing tools to prevent team burnout</li>
        <li>Time tracking integration for better project management</li>
        <li>Automated progress reports for stakeholders</li>
      </ul>
      
      <p class="mb-4">These new collaboration features are available to all customers on Business and Enterprise plans, with limited functionality available on the Professional plan.</p>
      
      <p>We're excited to see how these tools help your team work more effectively together. As always, we welcome your feedback as you explore these new capabilities.</p>
    `
  },
  'security-enhancements': {
    title: 'Security Enhancements and Compliance Updates',
    date: 'March 5, 2025',
    author: 'Jessica Lee',
    authorRole: 'Security Officer',
    authorAvatar: 'https://randomuser.me/api/portraits/women/45.jpg',
    category: 'Security',
    image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">At OpenAuth.Net, security is our top priority. We're pleased to announce several important security enhancements and compliance updates that further strengthen the protection of your data.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Enhanced Authentication</h2>
      
      <p class="mb-4">We've strengthened our authentication system with several new features:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>FIDO2 WebAuthn support for passwordless authentication</li>
        <li>Hardware security key integration (YubiKey, Titan Security Key)</li>
        <li>Improved multi-factor authentication with more options</li>
        <li>Risk-based authentication that adapts to unusual login patterns</li>
        <li>Single Sign-On (SSO) improvements for enterprise customers</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Security Recommendation</h3>
        <p>We strongly recommend enabling multi-factor authentication for all user accounts. Organizations can now enforce MFA at the account level through the admin dashboard.</p>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Data Protection Improvements</h2>
      
      <p class="mb-4">We've implemented several enhancements to better protect your data:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>End-to-end encryption for sensitive data fields</li>
        <li>Enhanced data loss prevention (DLP) controls</li>
        <li>Improved backup systems with faster recovery capabilities</li>
        <li>Granular data retention policies with automated enforcement</li>
        <li>Advanced audit logging for all data access and modifications</li>
      </ul>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">New Compliance Certifications</h2>
      
      <p class="mb-4">We're proud to announce that we've achieved several new compliance certifications:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>ISO 27001:2022 certification for information security management</li>
        <li>SOC 2 Type II attestation for security, availability, and confidentiality</li>
        <li>HIPAA compliance for healthcare data protection</li>
        <li>GDPR and CCPA compliance for personal data protection</li>
        <li>PCI DSS Level 1 certification for payment processing</li>
      </ul>
      
      <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center">
          <img src="https://via.placeholder.com/100x60?text=ISO+27001" alt="ISO 27001 Certification" class="max-h-12" />
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center">
          <img src="https://via.placeholder.com/100x60?text=SOC+2" alt="SOC 2 Certification" class="max-h-12" />
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center">
          <img src="https://via.placeholder.com/100x60?text=HIPAA" alt="HIPAA Compliance" class="max-h-12" />
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center">
          <img src="https://via.placeholder.com/100x60?text=GDPR" alt="GDPR Compliance" class="max-h-12" />
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg flex items-center justify-center">
          <img src="https://via.placeholder.com/100x60?text=PCI+DSS" alt="PCI DSS Certification" class="max-h-12" />
        </div>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Security Dashboard</h2>
      
      <p class="mb-4">We've introduced a new Security Dashboard for administrators that provides:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Real-time security posture assessment</li>
        <li>Detailed access logs with advanced filtering</li>
        <li>Security configuration recommendations</li>
        <li>Compliance status monitoring</li>
        <li>Incident response management tools</li>
      </ul>
      
      <div class="bg-red-50 dark:bg-red-900/30 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3 text-red-700 dark:text-red-300">Important Action Required</h3>
        <p class="mb-4">As part of these security enhancements, all API keys created before January 1, 2025, will be automatically rotated on June 1, 2025. Please update your integrations with new API keys before this date to avoid disruption.</p>
        <a href="#" class="inline-flex items-center mt-2 text-red-600 dark:text-red-400 font-medium hover:underline">
          Learn More About API Key Rotation
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Security Training Resources</h2>
      
      <p class="mb-4">To help your team maintain strong security practices, we've developed new security training resources:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Interactive security awareness training modules</li>
        <li>Phishing simulation tools to test and train employees</li>
        <li>Security best practices documentation</li>
        <li>Role-specific security guidelines for administrators and users</li>
      </ul>
      
      <p class="mb-4">These security enhancements reflect our ongoing commitment to protecting your data and maintaining your trust. We will continue to invest in security and compliance as a core part of our platform.</p>
      
      <p>If you have any questions about these security updates or need assistance implementing any of the new features, please contact our security team.</p>
    `
  },
  'integration-marketplace': {
    title: 'Introducing Our Integration Marketplace',
    date: 'February 18, 2025',
    author: 'Robert Kim',
    authorRole: 'Partnership Manager',
    authorAvatar: 'https://randomuser.me/api/portraits/men/67.jpg',
    category: 'Integrations',
    image: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    content: `
      <p class="mb-4">We're excited to announce the launch of our Integration Marketplace, featuring over 50 partner integrations that extend the functionality of our platform and connect with your favorite tools and services.</p>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Connect Your Entire Tech Stack</h2>
      
      <p class="mb-4">Our new Integration Marketplace allows you to connect our platform with a wide range of tools across categories including:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>CRM systems (Salesforce, HubSpot, Zoho)</li>
        <li>Marketing automation (Mailchimp, Marketo, ActiveCampaign) <li>Project management (Asana, Trello, Monday.com)</li>
        <li>Communication tools (Slack, Microsoft Teams, Discord)</li>
        <li>File storage (Google Drive, Dropbox, OneDrive)</li>
        <li>Accounting software (QuickBooks, Xero, FreshBooks)</li>
        <li>E-commerce platforms (Shopify, WooCommerce, Magento)</li>
        <li>Customer support (Zendesk, Intercom, Freshdesk)</li>
      </ul>
      
      <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3">Featured Integration: Slack</h3>
        <p class="mb-4">Our enhanced Slack integration allows you to:</p>
        <ul class="list-disc pl-6 mb-4">
          <li>Receive notifications about important events directly in your Slack channels</li>
          <li>Create and update records without leaving Slack</li>
          <li>Share dashboards and reports with your team</li>
          <li>Set up custom workflows between Slack and our platform</li>
        </ul>
        <a href="#" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium hover:underline">
          Learn more about the Slack integration
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Integration Categories</h2>
      
      <p class="mb-4">Our marketplace is organized into categories to help you find the right integrations for your needs:</p>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Payments & Finance</h3>
          <p class="text-gray-600 dark:text-gray-300">Connect with payment processors, accounting software, and financial tools.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-secondary-100 dark:bg-secondary-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-secondary-600 dark:text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Marketing & Communication</h3>
          <p class="text-gray-600 dark:text-gray-300">Integrate with email marketing, social media, and communication platforms.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-accent-100 dark:bg-accent-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Security & Compliance</h3>
          <p class="text-gray-600 dark:text-gray-300">Connect with security tools, identity providers, and compliance solutions.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-warning-600 dark:text-warning-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Customer Support</h3>
          <p class="text-gray-600 dark:text-gray-300">Integrate with help desk, live chat, and customer service platforms.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Productivity & Collaboration</h3>
          <p class="text-gray-600 dark:text-gray-300">Connect with project management, document sharing, and team collaboration tools.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="w-12 h-12 rounded-lg bg-secondary-100 dark:bg-secondary-900/30 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-secondary-600 dark:text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Data & Analytics</h3>
          <p class="text-gray-600 dark:text-gray-300">Integrate with business intelligence, data visualization, and analytics platforms.</p>
        </div>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Developer Tools</h2>
      
      <p class="mb-4">For developers looking to build custom integrations, we've enhanced our developer tools:</p>
      
      <ul class="list-disc pl-6 mb-6 space-y-2">
        <li>Improved API documentation with interactive examples</li>
        <li>Webhook management interface for easier configuration</li>
        <li>SDKs for popular programming languages (JavaScript, Python, Ruby, PHP)</li>
        <li>Integration templates to accelerate development</li>
        <li>Testing tools to validate your integrations</li>
      </ul>
      
      <div class="bg-primary-50 dark:bg-primary-900/30 p-6 rounded-lg mb-8">
        <h3 class="text-xl font-semibold mb-3 text-primary-700 dark:text-primary-300">Partner Program</h3>
        <p class="mb-4">Are you interested in becoming an integration partner? Our partner program offers:</p>
        <ul class="list-disc pl-6 mb-4">
          <li>Technical support for integration development</li>
          <li>Co-marketing opportunities</li>
          <li>Revenue sharing for premium integrations</li>
          <li>Early access to new API features</li>
        </ul>
        <a href="#" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium hover:underline">
          Learn more about our partner program
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
      
      <h2 class="text-2xl font-semibold mb-4 mt-8">Getting Started</h2>
      
      <p class="mb-4">To start using the Integration Marketplace:</p>
      
      <ol class="list-decimal pl-6 mb-6 space-y-2">
        <li>Navigate to the new "Integrations" section in your dashboard</li>
        <li>Browse or search for the tools you want to connect</li>
        <li>Click "Install" and follow the authorization process</li>
        <li>Configure the integration settings to match your workflow</li>
        <li>Start using the connected tools together</li>
      </ol>
      
      <p class="mb-4">We're continuously adding new integrations to the marketplace. If there's a specific integration you'd like to see, please let us know through our feature request form.</p>
      
      <p>We're excited to see how these integrations help streamline your workflows and look forward to your feedback as you explore the marketplace.</p>
    `
  }
};

const post = posts[slug];
if (!post) return Astro.redirect('/404');
---

<Layout title={`${post.title} - OpenAuth.Net博客`} description={post.title}>
  <Header />
  <main>
    <article class="pt-32 pb-16 md:pt-40 md:pb-24">
      <div class="container-custom max-w-4xl">
        <div class="mb-8">
          <a href="/blog" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            返回博客
          </a>
        </div>
        
        <div class="flex items-center mb-6">
          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-300 font-medium text-sm">
            {post.category}
          </span>
          <span class="mx-2 text-gray-300 dark:text-gray-600">•</span>
          <span class="text-gray-600 dark:text-gray-400">{post.date}</span>
        </div>
        
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-gray-900 dark:text-white">{post.title}</h1>
        
        <div class="flex items-center mb-8">
          <img 
            src={post.authorAvatar} 
            alt={post.author} 
            class="w-12 h-12 rounded-full mr-4 object-cover"
          />
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">{post.author}</p>
            <p class="text-gray-600 dark:text-gray-400">{post.authorRole}</p>
          </div>
        </div>
        
        <img 
          src={post.image} 
          alt={post.title}
          class="w-full h-auto rounded-xl mb-10 object-cover"
          style="max-height: 500px;"
        />
        
        <div class="prose prose-lg dark:prose-invert max-w-none" set:html={post.content} />
        
        <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-6 text-gray-900 dark:text-white">分享这篇文章</h3>
          <div class="flex space-x-4">
            <a href="#" class="p-2 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-300 hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/50 dark:hover:text-primary-400 transition-colors" aria-label="在Twitter上分享">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
              </svg>
            </a>
            <a href="#" class="p-2 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-300 hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/50 dark:hover:text-primary-400 transition-colors" aria-label="在LinkedIn上分享">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
              </svg>
            </a>
            <a href="#" class="p-2 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-300 hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/50 dark:hover:text-primary-400 transition-colors" aria-label="在Facebook上分享">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
              </svg>
            </a>
            <a href="#" class="p-2 bg-gray-100 dark:bg-gray-800 rounded-full text-gray-600 dark:text-gray-300 hover:bg-primary-100 hover:text-primary-600 dark:hover:bg-primary-900/50 dark:hover:text-primary-400 transition-colors" aria-label="通过电子邮件分享">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </article>
  </main>
  <Footer />
</Layout>